<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('试卷报告')" />
    <link rel="stylesheet" th:href="@{/ajax/libs/report/echarts/echarts.css}">
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>试卷基本信息</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6">
                                <label>试卷名称：</label>
                                <span th:text="${paper.name}"></span>
                            </div>
                            <div class="col-sm-6">
                                <label>平均分：</label>
                                <span th:text="${avgScore}"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>成绩分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="scoreDistribution" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>学生成绩列表</h5>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>排名</th>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>答题时长(分钟)</th>
                                    <th>分数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="student : ${studentList}">
                                    <td th:text="${student.rank}"></td>
                                    <td th:text="${student.number}"></td>
                                    <td th:text="${student.studentName}"></td>
                                    <td th:text="${student.duration}"></td>
                                    <td th:text="${student.score}"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>试题分析</h5>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>题干</th>
                                    <th>平均分</th>
                                    <th>得分率</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="question : ${questionList}">
                                    <td th:text="${question.seqNo}"></td>
                                    <td th:text="${question.questionBody}"></td>
                                    <td th:text="${question.avgScore}"></td>
                                    <td th:text="${question.scoreRate}"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <script th:src="@{/ajax/libs/report/echarts/echarts-all.min.js?v=4.2.1}"></script>
    <script>
        $(document).ready(function() {
            // 初始化成绩分布图表
            var scoreDistribution = echarts.init(document.getElementById('scoreDistribution'));
            var option = {
                title: {
                    text: '成绩分布统计'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['人数']
                },
                xAxis: {
                    data: ['优秀(80-100)', '良好(70-79)', '中等(60-69)', '及格(50-59)', '不及格(0-49)']
                },
                yAxis: {},
                series: [{
                    name: '人数',
                    type: 'bar',
                    data: [
                        [[${scoreDistribution.excellent}]],
                        [[${scoreDistribution.good}]],
                        [[${scoreDistribution.medium}]],
                        [[${scoreDistribution.pass}]],
                        [[${scoreDistribution.fail}]]
                    ]
                }]
            };
            scoreDistribution.setOption(option);
        });
    </script>
</body>
</html> 